import React, { useEffect, useMemo } from 'react';

import { Button, Card, Table, Tooltip } from 'antd';
import { history } from 'umi'

import LabelValue from '@/components/LabelValue';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { defaultFormatResult, useRequest } from '@/hooks';
import { fetchEntryMaterialById, fetchOrgList } from '@/pages/TurnoverSetting/EntrySetting/services';
import { formatResultByFetchDetail } from '@/pages/TurnoverSetting/EntrySetting/util';

import styles from './index.less';

const columns = [
    {
        title: '名称',
        width: 180,
        dataIndex: 'materialName'
    },
    {
        title: '信息录入方式',
        width: 120,
        dataIndex: 'inputType',
        render: text => {
            if (typeof text === 'number') {
                return <span>{text ? '附件上传' : '文本录入'}</span>;
            }
            return <span>--</span>;
        }
    },
    {
        title: '提示信息',
        width: 500,
        dataIndex: 'uploadTip',
        render: text => (
            <Tooltip placement="top" title={text} overlayClassName={styles.materialRemarkTooltip}>
                <span className={styles.materialRemark}>{text || '--'}</span>
            </Tooltip>
        )
    }
];

/**
 * 入职材料详情
 * @param {*} param0
 * @returns
 */
const EntryMaterialDetail = ({ location, loading }) => {
    const { query } = location;
    const { id } = query;
    const { run: getEntryMaterialById, data } = useRequest(params => fetchEntryMaterialById(params), {
        manual: true,
        formatResult: formatResultByFetchDetail
    });

    // 获取机构列表
    const { data: orgDataSource } = useRequest(fetchOrgList, {
        ...defaultFormatResult
    });

    const {
        tipInfo,
        entityMaterials = [],
        settingName,
        administrativeScopes = [],
        electronMaterials = [],
        id: templateId
    } = data || {};

    useEffect(() => {
        if (id) {
            getEntryMaterialById(id);
        }
    }, [getEntryMaterialById, id]);

    const selectedOrg = useMemo(() => {
        const result = administrativeScopes
            .map(item => {
                const org = orgDataSource?.find(o => o.organizationCode === item);
                return org ? org.organizationName : null;
            })
            .filter(Boolean);
        return result.join('、');
    }, [administrativeScopes, orgDataSource]);

    /**
     * 实体材料清单
     */
    const entityMaterialsList = useMemo(() => {
        const result = entityMaterials.map(item => {
            const { materialName } = item;
            return materialName;
        });

        return result.join('、');
    }, [entityMaterials]);

    return (
        <PageHeaderWrapper>
            <Card
                title="入职材料配置详情"
                bordered={false}
                loading={loading}
                className={styles.entryCard}
                extra={
                    <Button
                        type="primary"
                        disabled={!templateId}
                        onClick={() => {
                            history.push({
                                pathname: '/office/personnelManagement/onboardAndLeave/setting/entryMaterial/edit',
                                query: { id: templateId }
                            });
                        }}
                    >
                        编辑
                    </Button>
                }
            >
                <div className={styles.entryMaterialDetailWrapper}>
                    <LabelValue
                        labelClassName={styles.labelWidth100}
                        valueClassName={styles.darkColor}
                        label="配置名称"
                        value={settingName}
                    />
                    <LabelValue
                        labelClassName={styles.labelWidth100}
                        valueClassName={styles.darkColor}
                        label="适用行政机构"
                        value={data?.isDefault === 1 ? '全集团' : selectedOrg}
                    />
                    <LabelValue
                        labelClassName={styles.labelWidth100}
                        label="电子材料列表"
                        align="top"
                        valueClassName={styles.electronMaterialsTable}
                        value={() => (
                            <Table
                                rowKey="materialName"
                                columns={columns}
                                dataSource={electronMaterials}
                                pagination={false}
                            />
                        )}
                    />
                    <LabelValue
                        labelClassName={styles.labelWidth100}
                        valueClassName={styles.darkColor}
                        label="实体材料列表"
                        value={entityMaterialsList}
                    />
                    <LabelValue
                        labelClassName={styles.labelWidth100}
                        valueClassName={styles.darkColor}
                        align="top"
                        label="材料提供提示"
                        value={tipInfo}
                    />
                </div>
            </Card>
        </PageHeaderWrapper>
    );
};

export default EntryMaterialDetail;
